<template>
  <div class="container" ref="mainCon">
    <topTitle :titleText="titleText"></topTitle>
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <!-- <div class="operation" @click="roleAdd">新增角色</div> -->
        <!-- <el-button
          class="commonBut saveBtn funComBut fr"
          icon="icon iconfont icontianjia"
          @click="roleAdd"
          v-show="isShowAdd"
        >
            <span class="opetareText">新增角色</span>
        </el-button> -->
        <el-form :inline="true" :model="filterField">
          <el-col :lg="8" :xl="6">
            <el-form-item label="角色名称" class="row-padding-bottom">
              <el-input
                placeholder="请输入角色名称"
                clearable
                v-model="filterField.name"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-form-item>
            <!-- <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              class="commonBtn"
              @click="searchList"
            ></el-button> -->
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchList"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
            <exportBtn
              v-if="!isShowAdd"
              :dataLen="tableList.length"
              :filterField="filterField"
              api="api-s/report/export_SYS_ROLE"
            ></exportBtn>
          </el-form-item>
          <!-- <el-form-item>
            <exportBtn :dataLen="tableList.length" :filterField="filterField" api="api-s/report/export_SYS_ROLE"></exportBtn>
          </el-form-item> -->
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <div style="margin-bottom: 24px" v-if="isShowAdd">
          <exportBtn
            :dataLen="tableList.length"
            :filterField="filterField"
            api="api-s/report/export_SYS_ROLE"
          ></exportBtn>
          <el-button
            class="commonBut saveBtn funComBut"
            icon="icon iconfont icontianjia"
            @click="roleAdd"
          >
            <span class="opetareText">新增角色</span>
          </el-button>
        </div>
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableList"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          v-loading="loading"
          stripe
          style="border: 1px solid #dfe6ec"
          @sort-change="sortChange"
        >
          <!-- <el-table-column
          prop="name"
          label="角色名称"
          align="center"
          :formatter="formatTd"
          min-width="15%"
        ></el-table-column> -->
          <el-table-column label="角色名称" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.name"
                :columnName="'name'"
              ></copyText>
            </template>
          </el-table-column>
          <!-- <el-table-column
          prop="id"
          label="角色ID"
          align="center"
          :formatter="formatTd"
          min-width="15%"
        ></el-table-column> -->
          <el-table-column label="角色ID" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.id"
                :columnName="'id'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="creatrTimeStr"
            label="创建时间"
            align="center"
            min-width="12%"
            :formatter="formatTd"
            sortable="custom"
          ></el-table-column>
          <!-- <el-table-column prop="remark" label="角色介绍"  align="center"  :formatter="formatTd" min-width="20%">
             <template slot-scope="scope">
                <span v-if="(scope.row.remark+'').length < 13">
                  {{scope.row.remark ? scope.row.remark : "--"}}
                </span>
                <el-popover
                  v-else
                  placement="right"
                  title=""
                  width="15%"
                  trigger="hover"
                  :content="scope.row.remark">
                  <span class="addressBox" slot="reference" >
                    {{scope.row.remark ? scope.row.remark : "--"}}
                  </span> 
                </el-popover> 
              </template>
        </el-table-column> -->
          <el-table-column label="角色介绍" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.remark"
                :columnName="'remark'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            :formatter="formatTd"
            min-width="20%"
          >
            <template slot-scope="scope">
              <el-link
                type="primary"
                v-show="isShowDetail"
                @click="roleDetail(scope.row)"
                >角色详情</el-link
              >
              <el-link
                type="primary"
                v-show="isShowDetail"
                @click="rolePermission(scope.row)"
                >角色权限</el-link
              >
              <el-link
                type="primary"
                @click="deleteRole(scope.row)"
                v-show="isShowDel"
                >删除角色</el-link
              >
              <span v-show="!isShowDetail && !isShowDel">--</span>
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
        ></Pagination>
      </div>
    </div>
  </div>
</template>

<script>
import scrollTable from '@/mixin/scrollTable.js'
export default {
  name: 'roleManager',
  mixins: [scrollTable],
  data() {
    return {
      titleText: '角色管理',
      tableList: [],
      requestUrl: '/api-u/role/list',
      isShow: false, //列表加载
      loading: true,
      filterField: {
        name: '',
      },
      isShowAdd: '',
      isShowDel: '',
      isShowDetail: '',
    }
  },
  created() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
    this.isShowAdd = this.$store.state.buttonLimitsArr.indexOf('role:add') > -1
    this.isShowDel =
      this.$store.state.buttonLimitsArr.indexOf('role:delete') > -1
    this.isShowDetail =
      this.$store.state.buttonLimitsArr.indexOf('roleManage:detail') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('role:detail') > -1
  },
  mounted() {},
  methods: {
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    // 搜索
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    roleAdd() {
      this.skipPage('add', null)
    },
    roleDetail(row) {
      this.skipPage('detail', row)
    },
    rolePermission(row) {
      this.skipPage('qx', row)
    },
    skipPage(type, row) {
      var query
      if (type === 'add') {
        query = {
          type: type,
        }
      } else {
        query = {
          type: type,
          roleId: row.id,
        }
      }
      this.$router.push({
        path: '/home/baseSettings/roleManagerDetail',
        name: 'roleManagerDetail',
        query: query,
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/baseSettings/roleManager',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    deleteRole(row) {
      // this.$confirm(
      //   "角色已关联用户，无法直接删除，请先修改或禁用用户",
      //   "删除角色",
      //   {
      //     cancelButtonClass: "btn-custom-cancel",
      //     type: "warning"
      //   }
      // )
      //   .then(() => {})
      //   .catch(() => {});
      this.$confirm('确认删除该角色吗?', '提示', {
        cancelButtonClass: 'btn-custom-cancel',
        type: 'warning',
      })
        .then(() => {
          this.toDel(row.id)
        })
        .catch(() => {})
    },
    toDel(id) {
      this.axios({
        method: 'post',
        url: 'api-u/role/delete',
        data: {
          id: id,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message({
              message: '删除成功',
              type: 'success',
            })
            //删除成功刷新列表
            this.$refs.pagination.getTableListData()
          } else {
            this.$message({
              message: response.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {
          this.$message.error('删除失败')
        })
    },
  },
}
</script>

<style lang="less" scoped>
@import '../../../static/css/filterArea.less';
.operation {
  float: right;
  padding: 8px 12px 8px 12px;
  border-radius: 5px;
  background: rgb(0, 174, 255);
  color: white;
  font: 14px SourceHanSansCN-Medium;
  cursor: pointer;
}
.title {
  padding-left: 4px;
  padding-top: 10px;
  margin-bottom: -10px;
  font: bold 18px/50px Microsoft YaHei;
}
.addressBox {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
